<template>
    <el-date-picker
            v-model="vModel"
            type="daterange"
            align="right"
            @test="test"
            :placeholder="placeholder"
            :picker-options="pickerOptions">
    </el-date-picker>
</template>

<script>
    import util from '../../common/util'
    export default {
        props:{
            value:null,
            placeholder:{
                type:String,
                default:"选择日期范围"
            }
        },
        watch:{
            value(val){
                this.vModel = val
            },
            vModel(val){
                this.$emit("input",val)
            }
        },
        data() {
            return {
                test:123,
                vModel:this.value,
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            let start = util.date.getDate()
                            let end =  util.date.getDate()
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            let start = util.date.getDate()
                            let end =  util.date.getDate()
                            util.date.addDay(start,-1)
                            util.date.addDay(end,-1)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '本周',
                        onClick(picker) {
                            let start = util.date.getDate()
                            let end =  util.date.getDate()
                            var week = start.getDay(); //今天本周的第几天
                            util.date.addDay(start,-1*week+1)
                            util.date.addDay(end,6-week+1)
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '上周',
                        onClick(picker) {
                            let start = util.date.getDate()
                            let end =  util.date.getDate()
                            var week = start.getDay(); //今天本周的第几天
                            util.date.addDay(start,-1*week-7+1)
                            util.date.addDay(end,6-week-7+1)
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '本月',
                        onClick(picker) {
                            let start = util.date.getDate()
                            let end =  util.date.getDate()
                            start.setDate(1)
                            util.date.addMonth(end,1)
                            end.setDate(1)
                            util.date.addDay(end,-1)
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '上个月',
                        onClick(picker) {
                            let start = util.date.getDate()
                            let end =  util.date.getDate()
                            util.date.addMonth(start,-1)
                            start.setDate(1)
                            end.setDate(1)
                            util.date.addDay(end,-1)
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '今年',
                        onClick(picker) {
                            let start = util.date.getDate()
                            let end =  util.date.getDate()
                            start.setDate(1)
                            start.setMonth(0)
                            end.setMonth(11)
                            end.setDate(31)
                            picker.$emit('pick', [start, end]);
                        }
                    }
                    ]
                }
            };
        },
        methods:{

        }
    };
</script>